<script setup>
import { getGoodsDetail } from '@/api/category.js'
import { onMounted, ref } from 'vue'
import { showConfirmDialog } from 'vant'
import 'vant/es/dialog/style'
import { useCartStore } from '@/stores/cart'
defineOptions({
  name: 'cartItem'
})
const cartStore = useCartStore()
const props = defineProps(['item'])
const emit = defineEmits(['togChecked'])
const data = ref(false)
onMounted(async () => {
  const { goods } = await getGoodsDetail(props.item.goods_id)
  data.value = goods
})
const tog = (id) => emit('togChecked', id)

const del = (id) => {
  showConfirmDialog({
    title: '警告⚠',
    message: `确定要将${data.value.title}从购物车删除吗？`,
    confirmButtonText: '删除',
    confirmButtonColor: 'red'
  }).then(() => cartStore.delItem(id))
}
</script>

<template v-if="data">
  <van-swipe-cell class="bg-white my-2">
    <div class="d-flex justify-content-between align-items-center">
      <div class="d-flex justify-content-start align-items-center">
        <van-checkbox
          :model-value="props.item.is_checked"
          @click="tog(props.item.id)"
          checked-color="red"
        ></van-checkbox>
        <img
          :src="data.cover_url"
          width="100"
          height="100"
          alt="图片还在加载，请稍后..."
          @click="$router.push(`/detail/${data.id}`)"
        />
        <div>
          <h6>
            {{ data.title }}
          </h6>
          <p class="mt-4" style="color: orangered">￥{{ data.price }}</p>
        </div>
      </div>
      <div class="mr-3">
        <p>x{{ data.stock }}</p>
        <togGoodNum
          :stock="data.stock"
          :sel_num="props.item.num"
          :id="props.item.id"
        ></togGoodNum>
      </div>
    </div>
    <template #right>
      <button class="btn btn-danger h-100" @click="del(data.goods_id)">
        <van-icon name="delete-o" />
      </button>
    </template>
  </van-swipe-cell>
</template>

<style scoped lang="scss"></style>
